<template>
  <div class="address-box">
    <van-radio-group v-model="selectRadio" @change="changeSelect" class="w100">
      <div
        class="flex ai-c w100 p-b20 m-b20 border-btm"
        v-for="item in addList"
        :key="item.id"
      >
        <div class="lf flex ai-c">
          <!-- 个人中心————我的地址 -->
          <template v-if="hideCheck">
            <div class="l-h17 flex fd-c ai-c" style="flex-shrink: 0">
              <p class="f14 lf-name">{{ (item && item.name) || "绕碧晨" }}</p>
            </div>
            <div class="m-l20 l-h17">
              <p class="f16 flex ai-c">
                {{ (item && item.mobile) || "189472872342" }}
                <span class="f12 f-red m-l10" v-if="item.status === 1"
                  >默认</span
                >
              </p>
              <p class="f14 detail f-c66">
                {{ (item && item.address) || "福建省厦门市思明123号" }}
              </p>
            </div>
          </template>
          <!-- 填写订单时，我的地址，这里是有radio的，可以选择 -->
          <template v-if="!hideCheck">
            <van-radio class="flex ai-c" :name="item.id" icon-size="15">
              <p class="f14" style="flex-shrink: 0">{{ (item && item.name) || "绕碧晨" }}</p>
              <div v-if="!hideCheck" class="m-l20 l-h17">
                <p class="f16 flex ai-c">
                  {{ (item && item.mobile) || "189472872342" }}
                  <span class="f12 f-red m-l10" v-if="item.status === 1"
                    >默认</span
                  >
                </p>
                <p class="f14 detail f-c66">
                  {{ (item && item.address) || "福建省厦门市思明123号" }}
                </p>
              </div>
            </van-radio>
          </template>
        </div>
        <div class="rt" @click="edit(item)">编辑</div>
      </div>
    </van-radio-group>
  </div>
</template>

<script>
// import { computed, ref, watch } from 'vue'
// import { useStore } from 'vuex'
// import { useRouter } from 'vue-router'

import { mapState } from 'vuex'

export default {
  props:{
    address: Object,
    radioId: [Number, String],
    hideCheck: {
      default: false
    }
  },
  computed: mapState({
    addList: state => state.address.dataList
  }),
  data(){
    return{
      selectRadio: Number(this.radioId),
      // addList: this.$store.state.address.dataList,
    }
  },
  created(){
    // 这种是当页面刷新的时候，vuex中的init会变成true，因此要触发changeData事件，再去拿一次地址数据
    if(this.$store.state.address.init === true){
      this.$store.dispatch('getAddData');
    }
  },
  methods:{
    changeSelect(e){
      let list = this.$store.state.address.dataList;
      console.log('change...');
      this.$store.commit('selectAddressFunc', list.find(item => item.id === e))
      this.$store.commit('changeAddress', true);
      this.$router.back();
    },
    edit(item){
      console.log(item)
      this.$router.push({
        name: 'addressEdit',
        query:{
          id: item.id
        }
      })
  }
  }
  // setup(props) {
  //   let selectRadio = ref('');
  //   // let store = useStore();
  //   // let router = useRouter();


  //   // if(store.state.address.init === true){
  //   //   store.dispatch('getAddData');
  //   // }

  //   // console.log(props.radioId)

  //   // 监听事件，当init为false的时候，说明changeData事件已经执行完毕，也就是说addressList已经更新
  //   // 如果不写在watch里面，vuex异步更新无法在这里拿到
  //   // watch(props, (newProps, oldProps)=>{
  //     // if(store.state.address.init === false){
  //     //   selectRadio.value = store.state.address.selectAddress.id;
  //     // }
  //     selectRadio.value = Number(props.radioId)
  //     // console.log('组件id', selectRadio.value)
  //   // })

  //   // 当radio改变的时候
  //   // const changeSelect = (e) => {
  //   //   let list = store.state.address.dataList;
  //   //   console.log('change...');
  //   //   store.commit('selectAddressFunc', list.find(item => item.id === e))
  //   //   store.commit('changeAddress', true);
  //   // }

  //   // const edit = (item) => {
  //   //   console.log(item)
  //   //   router.push({
  //   //     name: 'addressEdit',
  //   //     query:{
  //   //       id: item.id
  //   //     }
  //   //   })
  //   // }

  //   return {
  //     addList: computed(() => store.state.address.dataList),
  //     // selectAddress: computed(() => store.state.address.selectAddress),
  //     changeSelect,
  //     selectRadio,
  //     edit
  //   }
  // }
}
</script>

<style lang="scss" scoped>
::v-deep .van-radio__label {
  display: flex;
  align-items: center;
}
.address-box {
  padding: 2.6rem 1.5rem 1.8rem 1.7rem;
  display: flex;
  .lf {
    flex: 1;
    padding-right: 1.2rem;
    .lf-name {
      width: 4.6rem;
    }
  }
  .rt {
    flex-shrink: 0;
    padding-left: 1.2rem;
    border-left: 1px solid #eee;
    color: #777;
    font-size: 1.4rem;
  }
  .detail {
    line-height: 1.2;
    margin-top: 0.4rem;
  }
}
.tag {
  background: #ee5959;
  color: #fff;
  /* padding: 3px px; */
  transform: scale(0.9);
  font-size: 1.2rem;
  border-radius: 20px;
  padding: 0 5px;
  margin-top: 3px;
  display: block;
  text-align: center;
}
</style>
